<script setup lang="ts">
const calendars = ref()

const open = () => {
  calendars.value.open()
}
const confirm = (e) => {
  console.log('~~~~~~e~', e)
}
const change = (val) => {
  console.log('AAAAAAA', val)
}
const order = ref({
  label: '综合排序',
  value: 'all',
  activeIndex: 0,
  color: '#333',
  activeColor: '#2878ff',
  child: [
    {
      label: '综合排序',
      value: 'all',
    },
    {
      label: '最新发布',
      value: 'new',
    },
    {
      label: '低价优先',
      value: 'money',
    },
  ],
})

const pickerColor = ref<HTMLElement>()
const openColor = () => {
  pickerColor.value.open()
}

const listAction = ref([
  {
    name: '选项一',
    subname: '选项一描述',
    color: '#ffaa7f',
    fontSize: '20',
  },
  {
    name: '选项二禁用',
    disabled: true,
  },
  {
    name: '开启load加载', // 开启后文字不显示
    loading: true,
  },
])
const actionSheet = ref()
const activeSelect = (val) => {
  console.log('选中该项：', val)
}
const activeClose = () => {
  console.log('关闭')
}
const openAction = () => {
  actionSheet.value.open()
}
</script>

<template>
  <view class="gg">
    <view class="flex justify-between items-center h-30rem bg-light-300">
      <view class="block w-300px bg-gray-800 flex-shrink-0">fsf</view>
      <view class="block w-200px bg-gray-400">fsf</view>
      <view class="block w-200px bg-gray-400">fsf</view>
    </view>
    <uv-image
      src="https://cdn.uviewui.com/uview/album/1.jpg"
      :fade="true"
      width="400rpx"
      height="400rpx"
      duration="450"
      radius="50%"
    ></uv-image>
    <uv-image src="https://cdn.uviewui.com/uview/album/1.jpg">
      <template v-slot:loading>
        <uv-loading-icon color="red"></uv-loading-icon>
      </template>
    </uv-image>
    <!-- 日历 -->
    <uv-calendars ref="calendars" @confirm="confirm" />
    <button @click="open">打开日历</button>
    <!-- 下拉筛选 -->
    <uv-drop-down ref="dropDown" sign="dropDown_1" :defaultValue="[0, '0', 'all']">
      <uv-drop-down-item :name="order" type="2" label="综合排序" value="all"></uv-drop-down-item>
      <uv-drop-down-item name="order" type="2" label="文档格式" value="0"></uv-drop-down-item>
      <uv-drop-down-item name="order" type="1" label="VIP文档" :value="0"></uv-drop-down-item>
    </uv-drop-down>
    <uv-drop-down-popup
      sign="dropDown_1"
      :click-overlay-on-close="true"
      :currentDropItem="order"
      @popupChange="change"
    ></uv-drop-down-popup>
    <!-- 颜色选择器  -->
    <uv-pick-color ref="pickerColor"></uv-pick-color>
    <button @click="openColor">打开颜色选择器</button>
    <!-- icon -->
    <uv-icon name="photo" size="40"></uv-icon>
    <uv-icon size="40" name="https://via.placeholder.com/50x50.png/3c9cff/fff"></uv-icon>
    <!-- button -->
    <uv-button type="primary" text="确定"></uv-button>
    <uv-button type="primary" :plain="true" text="镂空"></uv-button>
    <uv-button type="primary" :plain="true" :hairline="true" text="细边"></uv-button>
    <uv-button type="primary" text="禁用"></uv-button>
    <uv-button type="primary" loading loadingText="加载中"></uv-button>
    <uv-button type="primary" icon="map" text="图标按钮"></uv-button>
    <uv-button type="primary" shape="circle" text="按钮形状"></uv-button>
    <uv-button
      text="渐变色按钮"
      color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"
    ></uv-button>
    <uv-button type="primary" size="small" text="大小尺寸"></uv-button>
    <uv-text type="primary" text="主色"></uv-text>
    <uv-text type="error" text="错误"></uv-text>
    <uv-text type="success" text="成功"></uv-text>
    <uv-text type="warning" text="警告"></uv-text>
    <uv-text type="info" text="信息"></uv-text>
    <uv-text mode="phone" format="encrypt" text="15019479320"></uv-text>
    <uv-text mode="link" text="Go to uv-ui docs" href="https://www.uv-uiui.com"></uv-text>
    <uv-text mode="price" text="728732.32"></uv-text>
    <uv-text prefixIcon="baidu" iconStyle="font-size: 19px" text="百度一下,你就知道"></uv-text>
    <uv-text suffixIcon="arrow-leftward" iconStyle="font-size: 18px" text="查看更多"></uv-text>
    <uv-text
      :lines="2"
      color="#ccc"
      size="40rpx"
      text="关于uv-ui的取名来由，首字母u来自于uni-app首字母，
uni-app是基于Vue.js，Vue和View(延伸为UI、视图之意)同音，故取名uv-ui，
表达源于uni-app和Vue和uView之意，同时在此也对它们表示感谢。"
    ></uv-text>
    <uv-link href="https://www.uvui.cn" text="打开uv-ui文档"></uv-link>
    <uv-action-sheet
      ref="actionSheet"
      :actions="listAction"
      title="标题"
      @select="activeSelect"
      @close="activeClose"
    ></uv-action-sheet>
    <button @click="openAction">打开ActionSheet</button>
    <view class="ff">dsdfsdf</view>
  </view>
</template>

<style scoped lang="scss">
.gg {
  --dd: #cccccc;
}
.cc {
  @apply block w-360rpx truncate;
  --dd: #cccccc;
}
.ff {
  color: var(--dd);
}
</style>
